<template>
    <n-modal v-model:show="modelShowRef" @afterLeave="closeHandle">
        <n-list bordered class="project-info">
            <template #header>
                <n-space justify="space-between">
                    <n-h3 class="mb-0">关于我们</n-h3>
                    <n-icon size="18" class="go-cursor-pointer" @click="closeHandle">
                        <close-icon></close-icon>
                    </n-icon>
                </n-space>
            </template>

            <n-list-item>
                <n-space class="my-2" :size="20">
                    <n-text class="item-left">版权声明：</n-text>
                    <n-text>
                        本软件版权属于广西展云大数据科技有限公司所有
                    </n-text>
                </n-space>
            </n-list-item>

            <n-list-item>
                <n-space class="mt-2" :size="20">
                    <n-text class="item-left">商业授权：</n-text>
                    <n-text>
                        如需要使用该系统，请与展云科技负责人联系，授权使用
                    </n-text>
                </n-space>
            </n-list-item>
        </n-list>
    </n-modal>
</template>

<script lang="ts" setup>
import {ref, watch} from 'vue'
import {Close as CloseIcon} from '@vicons/ionicons5'

const props = defineProps({
    modelShow: Boolean
})

const emit = defineEmits(['update:modelShow'])

const modelShowRef = ref(false)

watch(() => props.modelShow, (newValue) => {
    modelShowRef.value = newValue
})

const closeHandle = () => {
    emit('update:modelShow', false)
}
</script>

<style lang="scss" scoped>
.project-info {
    //@extend .go-background-filter;
    min-width: 100px;
    max-width: 60vw;
    padding-bottom: 20px;

    .item-left {
        width: 200px;
    }

    //@include deep() {
    //  .n-pipelines-item:not(:last-child) {
    //    border-bottom: 0;
    //  }
    //}
}
</style>
